<template>
  <div class="m-token-tx">
    <div class="total">
      <div class="search-box" v-if="addr.length!==0">
        <div class="result-box flex-between">
          <span>{{$t('tokenDetail.screen')}}</span>
          <i class="iconfont iconshanchu" @click="$emit('clear')"></i>
        </div>
        <div class="adr">
          <router-link :to="`/address?address=${addr}`" class="light">{{addr|filterHash(20)}}</router-link>
          <i
            class="iconfont iconfuzhi"
            v-clipboard:copy="addr"
            v-clipboard:success="success"
            v-clipboard:error="error"
          ></i>
        </div>
        <div class="flex-left account">
          <i class="iconfont iconzhanghuyue"></i>
          <span>{{$t('address.balance')}}</span>
          <p>{{balance|filterNum}} {{token}}</p>
        </div>
      </div>
      <span class="tx-count">{{$t('address.txTotal',[filterNum(pages.total)])}}</span>
    </div>
    <!-- 表格部分 -->
    <el-table :data="Trades" stripe style="width: 100%" class="data-table">
      <el-table-column :label="$t('trade.hash')" width="165">
        <template slot-scope="item">
          <router-link :to="`/tradeHash?hash=${item.row.hash}`" class="light flex-left">
            <i
              class="iconfont err-ico"
              :class="{'iconjinggao-chucuo':item.row.success===false&&item.row.is_para===false}"
            ></i>
            {{item.row.hash|filterHash(10)}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.sender')" width="155">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.from}`"
            class="light"
          >{{item.row.from|filterHash(10)}}</router-link>
        </template>
      </el-table-column>
      <el-table-column width="50">
        <template slot-scope="item">
          <i class="iconfont iconjiantou-you"></i>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.receiver')" width="155">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.to}`"
            class="light"
          >{{item.row.to|filterHash(10)}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="fee" :label="$t('trade.num')" width="130">
        <template slot-scope="item">{{item.row|TradeValue}}</template>
      </el-table-column>
      <el-table-column :label="$t('trade.fee')" width="110">
        <template slot-scope="item">{{item.row.fee|filterFee}}</template>
      </el-table-column>
      <el-table-column prop="action_name" :label="$t('trade.func')" width="105"></el-table-column>
      <el-table-column :label="$t('trade.time')" width="140">
        <template slot-scope="item">{{item.row.block_time|caculateTime}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TxBase from "@/mixins/TokenDetail/tokenTx.js";
import { filterNum } from "../../../utils/filters";
export default {
  mixins: [TxBase],
  methods: {
    filterNum(num) {
      return filterNum(num);
    }
  }
};
</script>

<style lang="scss">
.m-token-tx {
  .total {
    position: relative;
    padding: 15px 0 10px;
    // min-height: 90px;
    background: #f9fafc;
    .tx-count {
      padding: 0 20px;
      font-size: 12px;
      color: $font_grey;
    }
    .adr {
      font-size: 12px;
      margin: 5px 20px 20px;
      .iconfuzhi {
        margin-left: 10px;
        color: $blue;
      }
    }
    .iconshanchu {
      float: right;
      color: $black;
      font-size: 20px;
      cursor: pointer;
      transition: 0.3s;
    }
    .iconshanchu:hover {
      opacity: 0.8;
    }
    .result-box {
      padding: 0 20px;
      span {
        color: $font_grey;
      }
    }
    .account {
      font-size: 12px;
      border-bottom: 1px solid #eaeaea;
      margin-bottom: 20px;
      padding: 0 20px;
      span {
        margin: 0 10px 0 5px;
        color: $font_grey;
      }
      p {
        color: $black;
        line-height: 30px;
      }
    }
  }
  .data-table {
    border-top: 1px solid #ececec;
    font-size: 12px;
    .el-table__header thead tr {
      height: 60px;
      color: $font_grey;
    }
    .iconjiantou-you {
      font-size: 20px;
      color: #9aaab9;
    }
    .err-ico {
      color: #e45359;
      font-size: 12px;
      width: 13px;
      margin-right: 5px;
      display: inline-flex;
    }
  }
  .el-table th:nth-of-type(1) .cell {
    padding-left: 30px;
  }
}
</style>